
import { useMemo, useRef } from 'react';
import CategoryItemRender from './CategoryItemRender'
import CustomValue from './CustomValue'
import './index.less'
import type { ISearchData } from '../../../../designer/service';
import type { ICategorySelect } from '../content';

function CategoryListRender({
  number,
  item,
  onSelected,
  selected,
  level,
  IsGroup,
  IsWhether,
  config,
  parentItem,
  showCustomValue
}: {
  item: ISearchData['SectionList'][number];
  selected: string[];
  onSelected: ICategorySelect;
  number?: number;
  level: number;
  IsGroup?: boolean | undefined;
  IsWhether: boolean;
  config: any;
  parentItem: any,
  showCustomValue: boolean;
}) {
  const list = useMemo(() => {
    if (item.IsGroup) {
      return number ? item.SectionGroupData.slice(0, number) : item.SectionGroupData
    }
    return number ? item.sectionItemList.slice(0, number) : item.sectionItemList;
  }, [number, item]);
  if (list.length == 0) {
    return null
  }
  //@ts-ignore
  return (
    <ul className="category-content">
      {list.map((section) => {
        return (
          <CategoryItemRender
            onSelected={onSelected}
            IsWhether={IsWhether}
            level={level}
            config={config}
            selected={selected}
            item={section}
            parentItem={parentItem}
          />
        );
      })}
      {parentItem.IsCustomSearch&& showCustomValue && <CustomValue item={item} onSelected={onSelected} index={level}/>}
    </ul>
  );
}

export default CategoryListRender;

